<template>
	<view>
		<scroll-view scroll-y="true" class="scroll" @scroll="scrollChnage">
			<view class="navbar-section" :class="{'navbar-fixed-section': isFixedEnable}">
        <view :style="{height:isFixedEnable?(marginTop*2)+'px':0}"></view>
        <ss-scroll-navbar :tabCurrentIndex="currentIndex" @navbarTap="navbarTapHandler" :scrollChangeIndex="currentI"
				 :navArr="navList" :color="color"></ss-scroll-navbar>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import ssScrollNavbar from '@/components/navBar/scroll-navbar.vue'

	export default {
		// props: ['currentI', 'navList', 'color','isFixedEnable'],
    props: {
      currentI: {
        type: Number,
        default: 0
      },
      navList:{
        type: Array,
        default: []
      },
      color:{
        type: String,
        default: '#000000'
      },
      isFixedEnable:{
        type: Boolean,
        default: false
      },
      marginTop: {
        type: Number,
        default: 0
      },
    },
		components: {
			ssScrollNavbar
		},
		data() {
			return {
				currentIndex: 0,
				isFixed: false,
				topHeight: 0,
				listData: [],
			}
		},
		onLoad(options) {
			// uni.setNavigationBarTitle({
			// 	title: options.title
			// });
			this.calculateTopSectionHeight();
		},
		created() {},

    // 推荐分类菜单吸顶
    onPageScroll(e) {
      console.log("onPageScroll:： ",this.isFixed)
      // 获取滚动的位置
      const scrollTop = e.scrollTop;
      // console.log("scrollTop",scrollTop,uni.getSystemInfoSync().windowHeight -400);
      // 判断滚动位置是否超过手机屏幕的高度
      if (scrollTop >= (uni.getSystemInfoSync().windowHeight - this.marginTop)) {
        // 将菜单添加固定定位样式，使其吸附在顶部
        // 使用uni.$b调用组件，注意选择器的命名可能会有不同
        this.isFixed = true;
      } else {
        // 移除固定定位样式
        this.isFixed = false;
      }
    },

		methods: {

			navbarTapHandler(index) {
				this.currentIndex = index;
				this.$emit('currentIndex', index)
			},
			scrollChnage(e) {
        console.log("isFixedEnable进来了： ",this.isFixedEnable)
        if(this.isFixedEnable){
          let top = e.detail.scrollTop;
          if (top >= this.topHeight) {
            this.isFixed = true;
          } else {
            this.isFixed = false;
          }
        }
			},
			/**
			 * 计算头部视图的高度
			 */
			calculateTopSectionHeight() {
				var that = this;
				let topView = uni.createSelectorQuery().select(".top-section");
				topView.fields({
					size: true
				}, data => {
					that.topHeight = data.height;
				}).exec();
			}
		},
		watch: {
			currentI: function(newVal) {
				this.navbarTapHandler(newVal)
			}
		}
	}
</script>

<style lang="scss">
	.scroll {
		// position: absolute;
		// top: 0upx;
		// left: 0upx;
		// bottom: 0upx;
		// right: 0upx;

	  .navbar-fixed-section {
		 	  position: fixed;
		 	  top: 0upx;
		 	  left: 0upx;
		 	  right: 0upx;
        z-index: 800;
        background: #fff;
		 }

		.top-section {
			height: 350upx;
			background-color: green;
		}

		.bottom-section {
			height: 1500upx;
			background-color: yellow;
		}

		.footer-section {
			height: 1500upx;
			background-color: blue;
		}
	}
</style>
